@import './variables.less';
@import '../../style/mixins.less';

.fnx-field {
	.fnx-icon {
		font-size: var(--fnx-field-input-icon-size);
	}

	&__control {
		overflow: hidden;
		flex: 1;
		vertical-align: middle;
	}

	&__control-item {
		flex: 1;
	}

	&__control-body {
		display: flex;
		align-items: center;
	}

	&__control-suffix {
		padding-left: var(--fnx-padding-xs);
	}

	&__control-prefix {
		padding-right: var(--fnx-padding-xs);
	}

	&__help {
		font-size: var(--fnx-field-help-font-size);
		text-align: left;

		&--text-center {
			text-align: center;
		}

		&--text-right {
			text-align: right;
		}
	}

	&__label {
		flex: none;
		box-sizing: border-box;
		width: var(--fnx-field-label-width);
		margin-right: var(--fnx-field-label-margin-right);
		color: var(--fnx-field-label-color);
		text-align: left;
		word-wrap: break-word;

		&--text-center {
			text-align: center;
		}

		&--text-right {
			text-align: right;
		}

		&--colon {
			&::after {
				content: ':';
			}
		}
	}

	&--hidden {
		display: none;
	}

	&--disabled {
		.fnx-field__label {
			color: var(--fnx-field-disabled-text-color);
		}
	}

	&--required {
		.fnx-field__label::before {
			content: '*';
			color: var(--fnx-field-required-color);
			margin-right: var(--fnx-padding-base);
		}
	}

	&--error {
		.fnx-field__help {
			color: var(--fnx-field-help-color);
		}
	}
}

.fnx-field-input {
	display: flex;
	align-items: center;
	font-size: var(--fnx-field-input-font-size);
	line-height: var(--fnx-field-input-line-height);

	&__control {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0; // for flex-shrink
		margin: 0;
		padding: 0;
		color: var(--fnx-field-input-text-color);
		line-height: inherit;
		text-align: left;
		background-color: transparent;
		border: 0;
		resize: none;

		&:disabled {
			color: var(--fnx-field-input-disabled-text-color);
			cursor: not-allowed;
			opacity: 1;
			// fix disabled color in mobile safari
			-webkit-text-fill-color: var(--fnx-field-input-disabled-text-color);
		}

		&::placeholder {
			color: var(--fnx-field-input-placeholder-text-color);
		}

		&:read-only {
			cursor: default;
		}

		// for ios wechat
		&[type='date'],
		&[type='time'],
		&[type='datetime-local'] {
			min-height: var(--fnx-field-input-line-height);
		}

		// for safari
		&[type='search'] {
			-webkit-appearance: none;
		}
	}

	&__clear {
		line-height: inherit;
		padding-left: var(--fnx-padding-base);
		color: var(--fnx-field-input-clear-icon-color);
		font-size: var(--fnx-field-input-clear-icon-size);
		cursor: pointer;
	}

	&--text-right {
		.fnx-field-input__control {
			text-align: right;
		}
	}

	&--text-center {
		.fnx-field-input__control {
			text-align: center;
		}
	}
}

.fnx-field-textarea {
	&__control {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0; // for flex-shrink
		margin: 0;
		padding: 0;
		color: var(--fnx-field-input-text-color);
		line-height: inherit;
		text-align: left;
		background-color: transparent;
		border: 0;
		resize: none;

		&:disabled {
			color: var(--fnx-field-input-disabled-text-color);
			cursor: not-allowed;
			opacity: 1;
			// fix disabled color in mobile safari
			-webkit-text-fill-color: var(--fnx-field-input-disabled-text-color);
		}

		&::placeholder {
			color: var(--fnx-field-input-placeholder-text-color);
		}

		&:read-only {
			cursor: default;
		}
	}

	&__count {
		display: block;
		margin-top: var(--fnx-padding-base);
		color: var(--fnx-field-input-count-color);
		font-size: var(--fnx-field-input-count-font-size);
		line-height: var(--fnx-field-input-count-line-height);
		text-align: right;
	}
}
